<template>
  <div class="main">
    <PureTableBar title="信用评分模型列表" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="createTaskVisible = true"> 新建信用评分模型 </el-button>
      </template>
      <template v-slot="{ size }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :pagination="pagination" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="checkPor(row)">
              详情
            </el-button>
            <el-button type='primary' text @click="checkResultList(row)">
              查看评分结果
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 创建任务弹窗 -->
    <ReDialog :width="1000" :height="500" :models="createTaskVisible" @Closes="CloseVisible()">
      <template #header>
        <h2 style="text-align: center;">新增信用评分模型</h2>
      </template>
      <template #main>
        <el-scrollbar height="430px">
          <el-form label-position="right" :close-on-click-modal="false" width="62%" center style="overflow:hidden"
            label-width="120px" :model="formData">
            <el-form-item label="模型名称:">
              <el-input v-model.trim="formData.creditModelName" style="width: 70%" />
            </el-form-item>
            <el-form-item label="产品类型:">
              <el-select v-model="formData.productType" style="width: 70%">
                <el-option v-for="type in productTypeList" :key="type.dicValue" :label="type.dicName
                " :value="type.dicValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户群:" prop="chartType">
              <el-select v-model="formData.creditScoreUserGroupId" style="width: 70%">
                <el-option v-for="type in customerList" :key="type.dicValue" :label="type.dicName
                " :value="type.dicValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="指数体系:" prop="chartType">
              <el-select v-model="formData.indexSystem" style="width: 70%">
                <el-option v-for="type in indexSystemList" :key="type.dicValue" :label="type.dicName
                " :value="type.dicValue" />
              </el-select>
            </el-form-item>
          </el-form>
          <div>
            <addition-model :ModeData="modeData" title="信用评分模型" ref="PersonalStability"
              v-if="createTaskVisible"></addition-model>
          </div>
          <h2 style="text-align: start;">优惠策略</h2>
          <table style="margin-left: 115px;margin-top: 20px;text-align: center;">
            <tr>
              <th style="width:300px">分数区间(0-10)</th>
              <th style="width:200px">优惠项目</th>
              <th style="width:200px">优惠比例</th>
            </tr>
            <tbody>
              <tr v-for="(item, index) in prefsorList">
                <td>
                  <div>
                    <el-input type="number" v-model="item.minPreferentialScore"
                      @blur="if (item.minPreferentialScore > 10) item.minPreferentialScore = 10; if (item.minPreferentialScore < 0) item.minPreferentialScore = 0;" />
                    <span>
                      ~
                    </span>
                    <el-input type="number" v-model="item.maxPreferentialScore"
                      @blur="if (item.maxPreferentialScore > 10) item.maxPreferentialScore = 10; if (item.maxPreferentialScore < 0) item.maxPreferentialScore = 0;" />
                  </div>
                </td>
                <td>
                  <el-select v-model="item.preferentialItem" style="width: 70%">
                    <el-option v-for="type in preferentialItemList" :key="type.dicValue" :label="type.dicName
                    " :value="type.dicValue" />
                  </el-select>
                </td>
                <td>
                  <el-select v-model="item.preferentialScale" style="width: 70%">
                    <el-option v-for="type in preferentialScaleList" :key="type.dicValue" :label="type.dicName
                    " :value="type.dicValue" />
                  </el-select>
                  <div class="close-icon" @click="deleteItem(index)"></div>
                </td>
              </tr>
            </tbody>
          </table>
          <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
            <CirclePlusFilled class="iocn" @click="addLevel" />
            <span style="height: 60px; line-height: 60px; color: #409Eff;" @click="addLevel">添加优惠策略</span>
          </div>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="SubmitVisible()" :loading="BtnLoading" type="primary">确定</el-button>
          <el-button @click="CloseVisible()"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>
    <!-- 查看详情 -->
    <ReDialog :width="1200" :height="600" :models="showVisible" @Closes="CloseVisible()">
      <template #header>
        <h2 style="text-align: center;">客群筛选详情</h2>
      </template>
      <template #main>
        <el-scrollbar height="500px">
          <el-form label-position="right" :close-on-click-modal="false" width="62%" center style="overflow:hidden"
            label-width="120px" :model="showData">
            <el-form-item label="模型名称:">
              <el-input v-model.trim="showData.creditModelName" style="width: 70%" disabled />
            </el-form-item>
            <el-form-item label="产品类型:">
              <el-select v-model="showData.productType" style="width: 70%" disabled>
                <el-option v-for="type in productTypeList" :key="type.dicValue" :label="type.dicName
                " :value="type.dicValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="客户群:" prop="chartType">
              <el-select v-model="showData.creditScoreUserGroupId" style="width: 70%" disabled>
                <el-option v-for="type in customerList" :key="type.dicValue" :label="type.dicName
                " :value="type.dicValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="指数体系:" prop="chartType">
              <el-select v-model="showData.indexSystem" style="width: 70%" disabled>
                <el-option v-for="type in indexSystemList" :key="type.dicValue" :label="type.dicName
                " :value="type.dicValue" />
              </el-select>
            </el-form-item>
          </el-form>

          <div>
            <show-model :detailData="detailData" v-if="showVisible"></show-model>
          </div>

          <h2 style="text-align: start;">优惠策略</h2>
          <table style="margin-left: 115px;margin-top: 20px;text-align: center;">
            <tr>
              <th style="width:300px">分数区间(0-10)</th>
              <th style="width:200px">优惠项目</th>
              <th style="width:200px">优惠比例</th>
            </tr>
            <tbody>
              <tr v-for="(item, index) in prefsorList">
                <td>
                  <div>
                    <el-input type="number" v-model="item.minPreferentialScore" readonly />
                    <span>
                      ~
                    </span>
                    <el-input type="number" v-model="item.maxPreferentialScore" readonly />
                  </div>
                </td>
                <td>
                  <el-select v-model="item.preferentialItem" style="width: 70%" disabled>
                    <el-option v-for="type in preferentialItemList" :key="type.dicValue" :label="type.dicName
                    " :value="type.dicValue" />
                  </el-select>
                </td>
                <td>
                  <el-select v-model="item.preferentialScale" style="width: 70%" disabled>
                    <el-option v-for="type in preferentialScaleList" :key="type.dicValue" :label="type.dicName
                    " :value="type.dicValue" />
                  </el-select>
                </td>
              </tr>
            </tbody>
          </table>
        </el-scrollbar>
      </template>
    </ReDialog>
    <!-- 查看评分结果 -->
    <ReDialog :width="1200" :height="600" :models="resultVisible" @Closes="resultVisible = false">
      <template #header>
        <h2 style="text-align: center;">评分结果列表</h2>
      </template>
      <template #main>
        <PureTableBar title="评分结果列表" class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
              size="small" :data="resultList" :columns="resultColumn" :checkList="checkList" :pagination="pagination1"
              @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
            </pure-table>
          </template>
        </PureTableBar>
      </template>
    </ReDialog>
  </div>
</template>
<script setup lang='ts'>
import { usePortrait } from "./hook/addCerditModel";
import { PureTableBar } from "@/components/RePureTableBar";
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  CirclePlusFilled
} from "@element-plus/icons-vue";
import additionModel from "./component/additionModel.vue"
import showModel from './component/showModel.vue'
const ruleFormRef = ref();
const {
  columns,
  loading,
  dataList,
  pagination,
  createTaskVisible,
  formData,
  handleSizeChange,
  handleCurrentChange,
  checkPor,
  productTypeList,
  customerList,
  preferentialItemList,
  preferentialScaleList,
  modeData,
  BtnLoading,
  SubmitVisible,
  CloseVisible,
  PersonalStability,
  resultColumn,
  resultVisible,
  resultList,
  handleSizeChange1,
  handleCurrentChange1,
  pagination1,
  checkResultList,
  showVisible,
  showData,
  detailData,
  prefsorList,
  addLevel,
  deleteItem,
  indexSystemList
} = usePortrait()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.el-input {
  width: 30%;
}

.datain_main_box {
  ._main_box_title {
    width: 100%;
    line-height: 36px;
    height: 36px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
    border-left: 3px solid #2b65a7;
    background-color: #efefee;
    margin: 10px 0;
  }
}


table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}

.iocn {
  width: 60px;
  font-size: 20px;
  display: inline-block;
  padding: 15px;
  color: #409Eff;
}

.close-icon {
  position: relative;
  display: inline-block;
  left: 15px;
  width: 20px;
  height: 8px;
  cursor: pointer;
}

.close-icon::before,
.close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 10px;
  background-color: red;
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
</style>
